import { Button, Card, Col, Empty, Form, Input, Layout, List, Menu, MenuProps, Row, Select, Typography } from 'antd';
import moment from 'moment';
import { useState, type FC, useEffect } from 'react';
import './style.less';
import { getTakeAwayShopAll } from '@/services/takeAwayShopService';
import { PageContainer } from '@ant-design/pro-layout';
import { Header } from 'antd/lib/layout/layout';
import { history } from 'umi';
import { setCookie } from '@/utils/cookieUtils';
import { ProjectOutlined } from '@ant-design/icons';
import UpdateModal from '../shop/list/components/updateModal';

const { Paragraph } = Typography;

type MenuItem = Required<MenuProps>['items'][number];

const items: MenuItem[] = [
  {
    label: '店铺列表',
    key: 'mail',
    icon: <ProjectOutlined />,
  }
];

const ProjectListPage: React.FC = () => {
  const [isOpenConfig, setIsOpenConfig] = useState<boolean>(false);
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [projectList, setProjectList] = useState<TakeAwayShopType.TakeAwayShop[]>([]);

  const [current, setCurrent] = useState('mail');

  const onClick: MenuProps['onClick'] = (e) => {
    console.log('click ', e);
    setCurrent(e.key);
  };

  const loadProjects = async () => {
    setIsLoading(false);
    const { Items } = await getTakeAwayShopAll();
    setProjectList(Items);
    const loading = !isLoading;
    setIsLoading(loading);
  }

  const tabList = [
    {
      key: 'projects',
      tab: '店铺列表',
    }
  ];


  const handleFormSubmit = async (value: string) => {
    // eslint-disable-next-line no-console
    const { Items } = await getTakeAwayShopAll({ "@filter": `contains(name,${value})` });
    setProjectList(Items);
  };

  useEffect(() => {
    loadProjects();
  }, [])

  const cardList = projectList && (
    <List<TakeAwayShopType.TakeAwayShop>
      rowKey="Id"
      grid={{
        gutter: 16,
        xs: 1,
        sm: 2,
        md: 3,
        lg: 3,
        xl: 4,
        xxl: 4,
      }}
      dataSource={projectList}
      renderItem={(item) => (
        <List.Item>
          <Card onClick={() => { history.push("/shop/list/index"); setCookie("shopId", item.Id?.toString() || "") }} className="card" hoverable cover={<img alt={item.ImgUrl} src={item.ImgUrl} />}>
            <Card.Meta
              title={<a>{item.Name}</a>}
              description={
                <>
                  <Paragraph className="item" ellipsis={{ rows: 2 }}>
                    {item.Description}
                  </Paragraph>
                  <Paragraph className="item" ellipsis={{ rows: 2 }}>
                    门店地址：{item.Address}
                  </Paragraph>
                  <Paragraph className="item" ellipsis={{ rows: 2 }}>
                    联系电话：{item.TelNumber}
                  </Paragraph>
                </>
              }
            />
          </Card>
        </List.Item>
      )}
    />
  );

  return (
    <Layout>
      <header style={{ backgroundColor: "#fff", padding: "0 ", borderBlockEnd: "1px solid rgba(5, 5, 5, 0.06) " }} className='ant-layout-header css-1qeeczj ant-pro-layout-header ant-pro-layout-header-fixed-header ant-pro-layout-header-mix ant-pro-layout-header-header css-1qi62h4'>
        <div className="ant-pro-global-header css-1qeeczj">
          <div className="ant-pro-global-header-logo css-1qeeczj ant-pro-global-header-logo-mix"><a>
            <img width="auto" height="22" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" alt="logo" />
            <h1 style={{ color: "black" }}>鱼米演绎后台管理系统</h1></a>
          </div>

          <Menu style={{ width: "70%", marginLeft: '10%' }} onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} />
        </div>
      </header>
      <PageContainer
        breadcrumb={{}}
        breadcrumbRender={false}
        prefixCls=""
        content={
          <>
            <div style={{ textAlign: 'center' }}>
              <Input.Search
                placeholder="请输入"
                enterButton="搜索"
                size="large"
                onSearch={handleFormSubmit}
                style={{ maxWidth: 522, width: '100%' }}
              />

              <Button
                key="1"
                type="primary"
                style={{ float: 'right' }}
                onClick={() => { setIsOpenConfig(true); }}
              >
                新增店铺
              </Button>
            </div>
          </>
        }
        tabList={tabList}
        tabActiveKey={'projects'}
      >
        <div className="coverCardList">
          <div className="cardList">{isLoading ? cardList : <Empty />}</div>
        </div>
      </PageContainer>

      <UpdateModal initImgUrl={""} id={0} closeEvent={setIsOpenConfig} isOpen={isOpenConfig} onSubmit={() => { setIsOpenConfig(false); }} />
    </Layout>
  );
};

export default ProjectListPage;
